<template>
  <div class="app-container">
    <el-tabs type="card" v-model="activeName">
      <el-tab-pane label="列表" name="first">
        <div class="head-container">
          <el-button
            style="margin-left: 5px"
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="openDialogFieldForm(false)"
          >新增字段
          </el-button>
        </div>

        <div class="head-container">
          <el-table
            v-loading="listLoading"
            :data="list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
          >
            <el-table-column type="index" width="50" label="序号">
              <template slot-scope="scope">
                <span>{{listQuery.pageNo * listQuery.pageSize +scope.row.listIndex + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="fieldCode" label="字段代码"/>
            <el-table-column prop="fieldDesc" label="字段描述"/>
            <el-table-column prop="fieldType" label="字段类型"/>
            <el-table-column prop="fieldLength" label="字段长度"/>
            <el-table-column prop="fieldPoint" label="小数位数"/>
            <el-table-column prop="ifNull" label="是否为空" width="100"/>

            <el-table-column align="center" label="操作" width="160">
              <template slot-scope="scope">
                <el-button
                  style="margin-left: 10px"
                  type="primary"
                  size="mini"
                  @click="openDialogFieldForm(true,scope.row)"
                >修改
                </el-button>
                <el-button
                  style="margin-left: 10px"
                  type="danger"
                  size="mini"
                  @click="handleDelete(scope.row)"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--分页组件-->
          <el-pagination
            style="margin-top: 8px;"
            layout="total, prev, pager, next"
            :page-size="listQuery.pageSize"
            :total="total"
            prev-text="上一页"
            next-text="下一页"
            :current-page="listQuery.pageNo+1"
            @current-change="paginationChange"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="字段内容" name="second" v-if="dialogFieldFormVisible">
        <!-- 弹出框新增table -->
          <el-form
            ref="fieldForm"
            :model="fieldForm"
            :rules="rules"
            label-position="right"
            label-width="150px"
            style="width: 600px; margin-left:20px;"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item label="字段代码" prop="fieldCode">
                  <el-input v-model="fieldForm.fieldCode" maxlength="40"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="字段描述" label-width="100px" prop="fieldDesc">
                  <el-input v-model="fieldForm.fieldDesc" maxlength="30"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="字段类型" prop="fieldType">
                  <el-select v-model="fieldForm.fieldType" placeholder="请选择" style="width: 100%;" @change="fieldTypeChange">
                    <el-option
                      v-for="item in selectList.fieldTypeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否允许为空" prop="ifNull">
                  <el-radio v-model="fieldForm.ifNull" label="notNull">notNull</el-radio>
                  <el-radio v-model="fieldForm.ifNull" label="null">null</el-radio>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="长度" prop="fieldLength">
                  <el-input-number v-model="fieldForm.fieldLength" :min="minNum" :max="maxNum" label="长度"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="小数位数" prop="fieldPoint">
                  <el-input-number v-model="fieldForm.fieldPoint" :min="0" :max="8" label="小数位数"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="Vue列表宽度" prop="vueWidth">
                  <el-input-number v-model="fieldForm.vueWidth" :min="2" :max="1000" label="Vue列表宽度"/>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
          <div class="dialog-footer">
            <el-button type="primary" plain @click="cancel">取 消</el-button>
            <el-button type="primary" @click="saveField">确 定</el-button>
          </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import {addField, deleteField, editField, getFieldPage, createCode} from '@/api/system/codegen'
  import msgUtil from '@/utils/msgUtil'
  // 定义table 的表单
  const fieldForm = {
    id: null,
    tableId: null,
    fieldCode: '',
    fieldDesc: '',
    fieldType: 'String',
    ifNull: 'null',
    fieldLength: 32,
    fieldPoint: 0,
    vueWidth: 120
  }
  export default {
    data() {
      return {
        total: 0,
        minNum: 0,
        maxNum: 4000,
        authorId: this.$route.query.authorId,
        isEdit: false,
        fieldForm: fieldForm,
        dialogFieldFormVisible: false,
        activeName: 'first',
        list: null,
        listGenTableCombo: [],
        listLoading: false,
        listQuery: {
          tableId: this.$route.query.tableId,
          pageNo: 0,
          pageSize: 10
        },
        rules: {
          fieldCode: [{required: true, trigger: 'blur', message: '字段代码不能为空'}],
          fieldDesc: [{required: true, trigger: 'blur', message: '字段描述不能为空'}],
          fieldType: [{required: true, trigger: 'blur', message: '字段类型不能为空'}],
          fieldLength: [{required: true, trigger: 'blur', message: '字段长度不能为空'}],
          ifNull: [{required: true, trigger: 'blur', message: '请选择是否为空'}]
        },
        selectList: {
          fieldTypeList: [{label: 'String', value: 'String'}, {label: 'Integer', value: 'Integer'}, {
            label: 'Double',
            value: 'Double'
          }, {label: 'Date', value: 'Date'}, {label: 'Long', value: 'Long'}, {label: 'Text', value: 'Text'}]
        } // 所有下拉框列表的集合
      }
    },
    created() {
      this.getFieldPage()
    },
    methods: {
      paginationChange(index) {
        this.listQuery.pageNo = index - 1
        this.getFieldPage()
      },
      cancel() {
        this.dialogFieldFormVisible = false
        this.fieldForm = {
          id: null,
          tableId: null,
          fieldCode: '',
          fieldDesc: '',
          fieldType: 'String',
          ifNull: 'null',
          fieldLength: 32,
          fieldPoint: 0,
          vueWidth: 120
        }
        this.minNum = 0,
          this.maxNum = 4000
        this.activeName = 'first'
      },
      // 删除
      handleDelete(row) {
        msgUtil.confirm('确认删除表数据?').then(async () => {
          const ids = []
          ids.push(row.id)
          await deleteField(ids)
          msgUtil.success2('删除成功!')
          this.getFieldPage()
        })
      },
      // 保存数据表配置
      saveField() {
        if (this.listQuery.tableId === '') {
          msgUtil.error2('请选择数据表')
          return
        }
        this.$refs.fieldForm.validate(valid => {
          if (valid) {
            if (this.isEdit) {
              this.fieldForm.tableId = this.listQuery.tableId
              editField(this.fieldForm).then(response => {
                msgUtil.success()
                this.dialogFieldFormVisible = false
                this.getFieldPage()
              })
            } else {
              this.fieldForm.tableId = this.listQuery.tableId
              addField(this.fieldForm).then(response => {
                msgUtil.success()
                this.dialogFieldFormVisible = false
                this.getFieldPage()
                this.cancel()
              })
            }
          }
        })
      },
      getFieldPage() {
        this.listLoading = true
        getFieldPage(this.listQuery).then(res => {
          this.list = res.data.content
          this.total = res.data.totalElements
          res.data.content.forEach((item, index) => {
            item.listIndex = index
          });
          this.$nextTick(() => {
            this.listLoading = false
          })
        })
      },
      fieldTypeChange(fieldType) {
        if (fieldType === 'String') {
          this.fieldForm.fieldLength = 32
          this.fieldForm.fieldPoint = 0
          this.minNum = 2
          this.maxNum = 4000
        } else if (fieldType === 'Integer') {
          this.fieldForm.fieldLength = 11
          this.fieldForm.fieldPoint = 0
          this.minNum = 1
          this.maxNum = 11
        } else if (fieldType === 'Date') {
          this.fieldForm.fieldLength = 0
          this.fieldForm.fieldPoint = 0
          this.minNum = 0
          this.maxNum = 0
        } else if (fieldType === 'Long') {
          this.fieldForm.fieldLength = 11
          this.fieldForm.fieldPoint = 0
          this.minNum = 1
          this.maxNum = 16
        } else if (fieldType === 'Double') {
          this.fieldForm.fieldLength = 11
          this.fieldForm.fieldPoint = 2
          this.minNum = 1
          this.maxNum = 11
        } else if (fieldType === 'Text') {
          this.fieldForm.fieldLength = 0
          this.fieldForm.fieldPoint = 0
          this.minNum = 0
          this.maxNum = 0
        } else {
          this.fieldForm.fieldLength = 32
          this.fieldForm.fieldPoint = 0
          this.minNum = 2
          this.maxNum = 4000
        }
      },
      // 打开fieldform窗口
      openDialogFieldForm(isEdit, row) {
        this.isEdit = isEdit
        if (isEdit) {
          this.fieldForm = row
        } else {
          this.fieldForm = {
            id: null,
            tableId: null,
            fieldCode: '',
            fieldDesc: '',
            fieldType: 'String',
            ifNull: 'null',
            fieldLength: 32,
            fieldPoint: 0,
            vueWidth: 120
          }
        }

        this.dialogFieldFormVisible = true
        this.$nextTick(()=>{
          this.activeName = 'second'
        })
      }
    }
  }
</script>
